<template>
  <div class="home_box">
    <!--首页轮播图-->
    <van-swipe  :autoplay="3000" indicator-color="white">
      <van-swipe-item>
        <img src="../assets/img1.jpg" alt="">
      </van-swipe-item>
      <van-swipe-item>
        <img src="../assets/img2.jpg" alt="">
      </van-swipe-item>
      <van-swipe-item>
        <img src="../assets/img3.jpg" alt="">
      </van-swipe-item>
      <van-swipe-item>
        <img src="../assets/img4.jpg" alt="">
      </van-swipe-item>
    </van-swipe>
    
    <!-- 这里是主页的一个 logo 图片 -->
    <div class="logo">
      <img style="width: 100%; height: auto;"
           src="../assets/logo3.jpg"
           alt="">
    </div>
    <!--这个是个分割线-->
    <van-divider>礼邦婚礼~服务项目</van-divider>
    <!--下面是真个系统的所有项目-->
    <!--TODO 记得修改这个Project的padding-->
    <van-grid :border="false" :column-num="2">
      <van-grid-item @click="show_project_detail(i.name)"  v-for="i in project_list" v-bind:key="i.pid">
        <Project :project="i"></Project>
      </van-grid-item>
    </van-grid>
  
  </div>
</template>

<script>
import Project from '@/components/Project.vue';

export default {
  components: {Project},
  name: "HomeView",
  data(){
    return{
      project_list:[
        {pid: '1', name: '案例展示', img:'/profile/upload/案例展示2.jpg' },
        {pid: '2', name: '特惠套餐', img:'/profile/upload/特惠套餐.jpg' },
        {pid: '3', name: '合作酒店', img:'/profile/upload/合作酒店.png' },
        {pid: '4', name: 'PARTY/活动', img:'/profile/upload/活动.jpg' },
        {pid: '5', name: '专属设计', img:'/profile/upload/专属设计.jpg' },
        {pid: '6', name: '婚礼灵感', img:'/profile/upload/婚礼灵感.png' },
      ]
    };
  },
  methods:{
    show_project_detail(name){
      console.log("当前项目为: " + name )
      this.$router.push({name:'project_detail',params:{project_name: name}})
    }
  }
}
</script>

<style scoped lang="less">
.logo {
  margin: 5px 0;
}
img{
  width: 384px;
  height: 150px;
}
:root:root {
  --van-grid-item-content-padding: 0 0;
}
</style>
